<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>
    <button onclick="alert('你别点我！')">按钮1</button>
    <button id="btn">按钮2</button>
    <button id="btn3">按钮3</button>
    <button id="btn4">按钮4</button>
    <hr>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi dolor dolore doloremque et
            explicabo fugit, iusto laudantium nihil nulla omnis perspiciatis possimus, quo unde voluptatibus. Aliquid
            architecto impedit quia?
        </div>
        <div>Accusantium adipisci aspernatur at cum cumque dolorem, enim facilis ipsa laboriosam maiores nam
            perspiciatis qui quis, repellat rerum temporibus voluptas. Aliquid animi delectus ea fuga nam, odit sunt
            temporibus voluptate.
        </div>
        <div>At autem beatae harum laboriosam voluptas! Consequatur et fuga ipsam magnam nihil omnis quae quia!
            Consequuntur excepturi ullam voluptas? Animi aut consequuntur eaque eveniet exercitationem praesentium qui
            sequi. Molestias, nostrum.
        </div>
        <div>Aut error eveniet molestiae officiis voluptatibus. Accusamus atque consequuntur debitis delectus distinctio
            eligendi enim esse ex hic in molestiae nam nobis, officia placeat provident quia sint sit soluta tenetur
            unde.
        </div>
        <div>A asperiores consectetur consequuntur corporis cumque eos et excepturi fugiat impedit necessitatibus
            recusandae, sapiente sint voluptatem. Consectetur deleniti esse ipsam iure magnam nobis nostrum qui
            temporibus. Doloremque numquam quas rem.
        </div>
        <div>Adipisci, aliquam, architecto dolor eius eos est, fugiat maiores maxime molestias necessitatibus placeat
            quod recusandae rem temporibus veritatis? Assumenda atque doloremque doloribus ducimus eaque eos explicabo
            fugiat laboriosam nulla voluptatum.
        </div>
        <div>Amet fugiat, maxime. Accusamus adipisci aliquam, aliquid cumque deleniti esse est explicabo hic ipsa ipsam
            magnam minima nisi numquam officiis rerum tenetur, vero voluptatibus voluptatum. Aliquam reiciendis
            repellendus sunt vel.
        </div>
        <div>Accusamus adipisci aliquam aperiam asperiores assumenda aut dolor facilis impedit incidunt ipsam iure minus
            modi neque non perferendis possimus quam quas qui quia quidem quisquam sequi sit, suscipit ullam ut.
        </div>
        <div>A accusamus asperiores explicabo ipsum provident sed veritatis? Consequatur deserunt esse, est excepturi
            expedita facilis fugiat impedit libero modi molestias natus perspiciatis quae rem saepe soluta ut velit vero
            voluptatum.
        </div>
        <div>Aliquam amet, at cum excepturi exercitationem fugiat id illum ipsam iste laudantium minima nisi non
            obcaecati officiis quas repudiandae suscipit temporibus unde? Adipisci culpa et id obcaecati tempora.
            Assumenda, reprehenderit!
        </div>
        <div>A ab autem beatae enim est et exercitationem harum illum iste maiores, minus non nulla quia quidem quis
            repellat similique soluta veniam veritatis voluptatum. Commodi eos eveniet ex labore vero.
        </div>
        <div>Ab accusamus culpa deleniti distinctio dolor dolorem doloremque ea earum, est excepturi expedita facere hic
            ipsum magnam maxime molestiae nam neque odit quae, qui ratione repellendus sint, temporibus vero voluptate.
        </div>
        <div>Ab autem doloremque dolores iusto pariatur soluta. Ab accusantium aut, enim eveniet explicabo facere fugiat
            id modi repellat repellendus reprehenderit, rerum sapiente temporibus! Ad commodi dolor, explicabo
            laudantium neque quod.
        </div>
        <div>Architecto corporis cupiditate deserunt, distinctio dolores error ipsa magni minima neque optio,
            perspiciatis quos repellendus sit totam unde voluptatibus voluptatum. Adipisci dolorem eligendi hic iusto,
            nam non quis reiciendis rerum.
        </div>
        <div>Alias aspernatur, consectetur culpa debitis ea eos facere fugit libero minima nostrum odit placeat
            praesentium quas quia quis repellat repellendus rerum sequi sint ullam ut voluptas voluptate voluptatum.
            Cumque, dignissimos?
        </div>
        <div>Animi aperiam atque dolore dolorem doloremque eum incidunt magnam magni minus non officiis quam, saepe
            vitae! Atque dignissimos, distinctio harum ipsam quae repudiandae sequi veritatis! Ad itaque molestias
            repudiandae sed!
        </div>
        <div>Atque dolorum eligendi eum exercitationem expedita perferendis possimus repellat similique. Architecto,
            blanditiis corporis deserunt ea eaque eius et excepturi facere hic itaque minima, necessitatibus nesciunt
            nobis, qui quos recusandae repellendus!
        </div>
        <div>Accusamus at consectetur cum cumque eveniet, exercitationem explicabo fugiat fugit illum in libero mollitia
            omnis perspiciatis quisquam, recusandae soluta ut veniam? Alias eum laboriosam officiis quas sapiente
            similique, tempore ut?
        </div>
        <div>Accusantium aliquam esse hic laboriosam mollitia qui sed! Assumenda cum deserunt doloribus nobis
            praesentium qui, sapiente unde. Aut blanditiis cupiditate est explicabo molestias quas quos sint ut.
            Cupiditate nam, quos!
        </div>
        <div>Deleniti earum est mollitia natus odit recusandae repudiandae tempora voluptatum? A, accusamus architecto
            consequuntur cupiditate doloremque eius, incidunt praesentium quisquam, ratione rerum sed voluptatum.
            Consectetur eius illum ut. Eos, provident!
        </div>
        <div>Cumque dicta dignissimos iste minima pariatur, quae quaerat sequi sint. Ab assumenda consequuntur culpa
            debitis doloribus ea id illum impedit labore magni minima molestiae necessitatibus, non quasi, repudiandae
            velit voluptas?
        </div>
        <div>Ab consequatur dolorem doloremque laboriosam molestiae nesciunt nihil quis quo, sint suscipit ullam vero.
            Adipisci aperiam dolores, fugiat ipsa ipsam labore laborum molestiae molestias neque perferendis rem,
            tempora temporibus voluptatum.
        </div>
        <div>Animi consequuntur, deleniti est expedita fugiat fugit harum iusto labore necessitatibus non placeat porro
            quaerat quia, quibusdam ratione rerum similique? Aliquid cupiditate inventore laborum necessitatibus,
            nesciunt porro quis quisquam rerum?
        </div>
        <div>Alias architecto, beatae blanditiis cum dolorem earum esse eveniet facilis ipsa iusto, natus nemo nihil
            nisi nobis non pariatur perferendis porro quibusdam quis reiciendis rem voluptatem, voluptates. Aperiam,
            doloribus earum?
        </div>
        <div>Cumque dicta dolor esse est fuga maiores molestias velit veniam? Ipsum magnam molestias, omnis perspiciatis
            quaerat suscipit vitae. Ad autem beatae cumque dignissimos ipsam nam neque nostrum quis ratione reiciendis?
        </div>
        <div>Alias delectus ipsum, itaque non repellat saepe? Accusamus aliquam animi architecto aspernatur corporis cum
            ducimus earum explicabo, illum molestias neque obcaecati quidem recusandae reprehenderit rerum sapiente sit,
            tenetur? Quaerat, quos?
        </div>
        <div>Illo maxime nulla perspiciatis qui voluptates! Accusantium aliquid architecto aut consectetur cumque
            deserunt eaque eum excepturi facilis fuga illo illum labore neque nisi odit, officia officiis qui quibusdam
            recusandae repudiandae!
        </div>
        <div>Accusantium culpa earum facilis fugiat fugit ipsa laudantium maiores minima nemo obcaecati pariatur quidem
            rerum tempore velit vero voluptatem, voluptatum! Aliquid amet eum id ipsa numquam odio, quaerat quibusdam
            quo.
        </div>
        <div>Aliquid assumenda at aut corporis distinctio dolores ducimus eius ex expedita fuga ipsam laborum laudantium
            libero, molestiae molestias nihil nostrum omnis pariatur possimus recusandae sequi similique tempora tempore
            veniam vitae.
        </div>
        <div>Aspernatur debitis eveniet fugit nostrum praesentium, quae quaerat quasi recusandae sint tempore vero
            voluptas? Consequuntur, cumque necessitatibus officia porro quam rerum temporibus. Consectetur consequatur
            doloribus suscipit ut! Doloremque, ullam, voluptate!
        </div>
        <div>Adipisci amet architecto, autem, cum distinctio dolor doloribus eveniet iusto magnam, nam nostrum numquam
            omnis optio quaerat quia quidem quos ratione suscipit tempore voluptatum? Ex facere in laboriosam optio vel.
        </div>
        <div>Adipisci amet animi asperiores delectus distinctio doloribus dolorum eos esse, est explicabo facere fugiat
            magnam minima odio optio praesentium similique sint, soluta totam vero. Aliquam delectus dicta numquam
            quidem vel?
        </div>
        <div>Adipisci dolorem doloremque error et laborum omnis pariatur quas ratione velit voluptate! Atque deleniti
            impedit neque veritatis! Blanditiis cumque dolor, est harum ipsa ipsam maiores modi nostrum quis recusandae
            voluptatem?
        </div>
        <div>Blanditiis dignissimos eveniet in, molestiae nam nobis pariatur porro quam quia quibusdam saepe unde? Cum
            maxime, ratione. Delectus expedita id ipsam labore nam pariatur quasi quidem sequi tempora unde? Porro!
        </div>
        <div>Facere iste odit repudiandae sunt suscipit temporibus. Accusamus aliquam aperiam consequuntur cum eos error
            esse expedita iusto laborum nesciunt, placeat quasi quis quos ratione reiciendis sequi soluta veritatis
            vitae, voluptatibus.
        </div>
        <div>Accusamus aliquam asperiores beatae, eaque esse illum ipsa minima, molestias nemo nihil nobis sint velit
            voluptates. Assumenda corporis quia quis vel vitae. Ab alias ducimus harum inventore maiores minus
            perferendis.
        </div>
        <div>Ipsum nostrum repellendus sit unde veniam voluptas voluptatum? Ad, aspernatur assumenda at consequatur
            ducimus enim hic, illum impedit labore nam nemo officiis quaerat qui saepe, veniam veritatis voluptatem
            voluptatibus voluptatum.
        </div>
        <div>Consectetur inventore, itaque magnam minima modi officia temporibus veritatis. Doloremque eum neque nisi
            quia repellat! Alias ex exercitationem quas? Aut beatae earum enim id in iure molestiae rem repudiandae
            suscipit.
        </div>
        <div>Adipisci animi architecto corporis cum cumque doloribus eos et illo incidunt ipsa laboriosam nemo non odit
            omnis quis ratione repellat repellendus, sunt totam ut. Ab consequatur id non suscipit veniam.
        </div>
        <div>Commodi debitis eligendi similique. Eaque numquam reiciendis similique vero. Aspernatur consectetur cum
            cupiditate deserunt distinctio excepturi fuga in laborum maiores nulla placeat provident quam quibusdam,
            repellendus repudiandae sapiente veniam veritatis?
        </div>
        <div>Aliquid asperiores corporis cumque dolore exercitationem libero minus nihil numquam obcaecati porro?
            Accusantium asperiores beatae debitis dolores, eveniet ex laudantium necessitatibus nesciunt nihil quas qui
            quo, rem suscipit velit veniam?
        </div>
        <div>Blanditiis consequatur enim maiores maxime nisi officiis porro quisquam sunt. Asperiores commodi corporis
            doloribus magnam minima nihil pariatur, porro quae reiciendis. Assumenda atque dolore et harum odio odit,
            sed sit!
        </div>
        <div>Alias fuga, laudantium! Adipisci alias animi deleniti dicta doloremque dolores earum est hic illo illum
            ipsum itaque nam officia provident quae quam quia quo reiciendis sapiente sequi unde, voluptas voluptatem!
        </div>
        <div>Accusamus, accusantium architecto aspernatur atque blanditiis commodi debitis eaque eos eum expedita fugiat
            ipsum labore laboriosam neque, porro qui quo reprehenderit suscipit, tenetur totam ullam vel voluptas
            voluptatem voluptates voluptatibus.
        </div>
        <div>Aliquid atque, aut dignissimos, dolore dolorum ea eius eum ex excepturi ipsa ipsum maxime natus nemo
            officiis perferendis possimus quae quaerat recusandae sed sit suscipit ullam unde veritatis voluptas
            voluptatem.
        </div>
        <div>Culpa delectus error magnam nihil quia ratione voluptates! Ab accusamus adipisci amet, asperiores,
            blanditiis consectetur cupiditate distinctio eligendi expedita fugit harum maxime minus modi nam nemo odio
            officiis quisquam rerum.
        </div>
        <div>Ad deleniti ducimus illum itaque nesciunt, quaerat quasi quos! Accusamus aliquid cumque ea earum enim ex
            expedita incidunt, quas ratione sit, ut voluptates. Accusamus beatae enim nobis saepe temporibus vitae.
        </div>
        <div>Corporis delectus deserunt dignissimos eius fugit? Ad adipisci commodi, dolorem doloribus et eum expedita
            ipsum maiores nulla obcaecati odit provident quas, repellat sint sunt ullam vel. Alias laborum rem
            voluptate.
        </div>
        <div>Accusamus accusantium ad adipisci architecto, aut ea eligendi enim ex incidunt ipsam magni neque officia
            optio provident qui quia quod reiciendis repellat, sed similique temporibus tenetur vero? Aut, ducimus,
            voluptas.
        </div>
        <div>Aliquam debitis ex libero molestias, non nulla obcaecati odit omnis? A amet consequuntur eligendi itaque
            iure nulla officiis quae quaerat vel. Cum doloremque ex impedit nihil officiis praesentium quis ratione.
        </div>
        <div>A ad aliquam beatae illo ipsa minima perferendis, placeat quae quaerat quis quo quod sapiente, sit tenetur
            voluptas. Accusamus aperiam cum cupiditate illo mollitia nesciunt, optio quam quisquam tempora totam.
        </div>
        <div>Consequatur esse minima nobis nostrum placeat quos recusandae soluta ut vel voluptate. Accusantium commodi
            dolor dolore, earum eos explicabo facere id mollitia odio officiis quae saepe sunt temporibus voluptas,
            voluptatum?
        </div>
        <div>Consequuntur eum expedita ipsum natus recusandae reprehenderit voluptates. Accusantium alias aliquid
            aperiam, aut consectetur debitis eius enim fugit magni nam nostrum possimus quia quibusdam quisquam
            repellendus soluta suscipit tempora voluptate!
        </div>
        <div>Alias esse iste neque similique? Ad aspernatur dignissimos dolor dolorum esse est eveniet excepturi fugiat
            laudantium libero maiores, minima mollitia nostrum nulla, officiis placeat quisquam quo ratione veritatis
            vitae! Sed.
        </div>
        <div>Accusantium amet assumenda distinctio doloremque eaque enim excepturi, exercitationem, labore magni
            nesciunt quasi quo voluptatum? Aspernatur debitis eos explicabo, harum inventore libero minima perspiciatis
            porro quaerat sint. Consectetur magni, provident.
        </div>
        <div>Ab adipisci aspernatur numquam quaerat, repellat rerum sit. Architecto aspernatur consequuntur dolor esse
            fuga, fugiat id illum iure libero magnam nulla quas qui quo, sed vel voluptatibus voluptatum. Sed,
            temporibus.
        </div>
        <div>Aperiam aspernatur assumenda blanditiis corporis debitis doloribus eius, expedita facere fugit inventore
            ipsum iure magnam minus nulla quas, reiciendis repudiandae rerum totam, ut velit! Culpa harum magni maiores
            minima praesentium.
        </div>
        <div>A atque autem cum cumque dignissimos distinctio eaque error esse, eveniet exercitationem hic, id impedit in
            ipsa iste minima modi mollitia pariatur qui quia quos recusandae reprehenderit sed soluta unde!
        </div>
        <div>Accusantium, ad animi aperiam deleniti distinctio, eveniet explicabo fugiat labore nulla obcaecati quod
            recusandae, reprehenderit ut? Ab dolorem error pariatur perspiciatis quis quisquam sit suscipit totam vitae
            voluptatem! Debitis, ipsum.
        </div>
        <div>Accusantium animi consequuntur deserunt dolore, dolorum eaque eveniet, facilis fugiat harum hic ipsum iste
            mollitia officiis, quasi quisquam quo quod reiciendis repellat rerum sed sequi tempora tempore ut veniam
            vero.
        </div>
    </div>
<script>
    let button = document.querySelector('#btn');
    button.addEventListener('click', function () {
        alert('你别巴拉我！');
    });
    document.getElementById('btn3').addEventListener('mouseover',function (){
        alert('你别划我！');
    });
    document.getElementById('btn4').addEventListener('mouseout',function (){
        alert('出来！');
    });
    // window.addEventListener('scroll',function (){
    //     alert('滚起来');
    // });
    // window.addEventListener('resize',function (){
    //     alert('改变窗口的大小');
    // });
    let p1 = {
        age:22,
        name:'刘武雄',
        say:function (){
            console.log('我是'+this.name+'今年'+this.age+'岁');
        }
    }
    console.log(p1,p1.age,p1.name);
    p1.say();
    let p2 = {};
    p2.name='张三';
    p2.age=18;
    p2.say=function (){
        console.log('我是'+this.name+'今年'+this.age+'岁');
    };
    console.log(p2, p2.age, p2.name);
    p2.say();
</script>
</body>
</html>